<template>
  <div class="container message-detail">
    <scroll-view
      class="message-scroll"
      :class="moreType ? 'more-type-scroll' : 'noraml-scroll'"
      :scroll-into-view="'message-' + indexNum "
      :scroll-y="true" @click="wallMainEls">
      <ul class="message-wall pad-t-10 pad-b-10">
        <div v-for="(item, index) in messageData" :key="index" :id="'message-' + index">
          <li class="date font-12 font-color-6 pad-t-10" v-if="item.sentTimeDate"><i>{{item.sentTimeDate}}</i></li>
          <li :class="item.targetId !== item.senderUserId ? 'me':'other'"
          class="flex pad-l-15 pad-r-15 pad-t-10 pad-b-4">
            <!-- 别人消息 -->
            <template v-if="item.content.customer && item.targetId === item.senderUserId">
              <div>
                <img
                  v-if="fileSpace"
                  :src="item.content.customer.avatar ? item.content.customer.avatar : fileSpace + '/images/default-avatar.png'"
                  class="avatar-img mar-r-10" alt="">
              </div>
              <div>
                <h2 class="font-10 font-color-6 mar-t--4 mar-b-4">{{ item.content.customer.nickname }}</h2>
                <div
                  v-if="item.messageType === 'RC:TxtMsg' && !item.content.order"
                  class="content-item content-txt font-14 pad-t-2">
                  {{ item.content.content }}
                </div>
                <div
                  v-if="item.messageType === 'RC:TxtMsg' && item.content.order"
                  class="content-item content-order font-12">
                  <div class="pad-b-6">{{ item.content.content }}</div>
                  <div class="order-content flex v-align-b pad-r-16">
                    <img
                      v-if="fileSpace"
                      :src="item.content.order.orderGoodsList[0].goodsImageUrl"
                      class="order-img width-50 height-50 mar-r-5" alt="">
                    <div class="flex-item">
                      <div class="line-1 font-13">{{ item.content.order.orderGoodsList[0].goodsTitle }}</div>
                      <div class="pad-t-5 pad-b-5 font-11 font-color-9">共{{ item.content.order.orderGoodsList.length }}件商品：合计¥{{ item.content.order.orderPrice }}</div>
                    </div>
                  </div>
                  <div class="font-color-6 pad-t-7">订单状态：{{ item.content.order.orderStatusType }}</div>
                  <div class="font-color-6">创建时间：{{ item.content.order.createTime }}</div>
                  <div class="flex">
                    <div class="flex-item"></div>
                    <div class="order-send-btn check-btn mar-t-8" @click="checkOrder(item.content.order)">查看</div>
                  </div>
                </div>
                <div
                  v-if="item.messageType === 'RC:ImgMsg'"
                  class="content-item content-pic">
                  <img
                    v-if="item.content.imageUri"
                    :src="item.content.imageUri + '?imageView2/2/w/170'"
                    @click="previewImage(item.content.imageUri)"
                    class="width-160" mode="widthFix" alt="">
                </div>
              </div>            
              <!-- 最后占位 flex-item -->
              <div class="flex-item"></div>
            </template>
            <!-- 自己消息 -->
            <template v-if="item.content.customer && item.targetId !== item.senderUserId">
              <!-- 最后占位 flex-item -->
              <div class="flex-item"></div>
              <div class="v-align-b">
                <div
                  v-if="item.statue === 1"
                  class="font-12 txt font-color-6 mar-r-10">已读</div>
                <div
                  v-if="item.statue === 2"
                  class="font-12 txt font-color-red mar-r-10">未读</div>
                <van-icon v-if="item.statue === 3" name="warning" size="18px" color="#f63c2e" class="mar-r-10" />
              </div>
              <div>
                <h2 class="font-10 font-color-6 mar-t--4 mar-b-4">{{ item.content.customer.nickname }}</h2>
                <div
                  v-if="item.messageType === 'RC:TxtMsg' && !item.content.order"
                  class="content-item content-txt font-14 pad-t-2">
                  {{ item.content.content }}
                </div>
                <div
                  v-if="item.messageType === 'RC:TxtMsg' && item.content.order"
                  class="content-item content-order font-12">
                  <div class="pad-b-6">{{ item.content.content }}</div>
                  <div class="order-content flex v-align-b pad-r-16">
                    <img
                      v-if="fileSpace"
                      :src="item.content.order.orderGoodsList[0].goodsImageUrl"
                      class="order-img width-50 height-50 mar-r-5" alt="">
                    <div class="flex-item">
                      <div class="line-1 font-13">{{ item.content.order.orderGoodsList[0].goodsTitle }}</div>
                      <div class="pad-t-5 pad-b-5 font-11 font-color-9">共{{ item.content.order.orderGoodsList.length }}件商品：合计¥{{ item.content.order.orderPrice }}</div>
                    </div>
                  </div>
                  <div class="font-color-6 pad-t-7">订单状态：{{ item.content.order.orderStatusType }}</div>
                  <div class="font-color-6">创建时间：{{ item.content.order.createTime }}</div>
                  <div class="flex">
                    <div class="flex-item"></div>
                    <div class="order-send-btn check-btn mar-t-8" @click="checkOrder(item.content.order)">查看</div>
                  </div>
                </div>
                <div
                  v-if="item.messageType === 'RC:ImgMsg'"
                  class="content-item content-pic">
                  <img
                    v-if="item.content.imageUri"
                    :src="item.content.imageUri + '?imageView2/2/w/170'"
                    @click="previewImage(item.content.imageUri)"
                    class="width-160" mode="widthFix" alt="">
                </div>
              </div>
              <div>
                <img
                  v-if="fileSpace"
                  :src="item.content.customer.avatar ? item.content.customer.avatar : fileSpace + '/images/default-avatar.png'"
                  class="avatar-img mar-l-10 flex" alt="">
              </div>
            </template>
          </li>        
        </div>
      </ul>
    </scroll-view>
    <div v-if="order.orderGoodsList && orderShow" class="order-fix flex v-align-b pad-10">
      <img
        v-if="fileSpace"
        :src="order.orderGoodsList[0].goodsImageUrl"
        class="order-img width-50 height-50 mar-r-5" alt="">
      <div class="flex-item">
        <div class="line-1 font-13">{{ order.orderGoodsList[0].goodsTitle }}</div>
        <div class="pad-t-5 pad-b-5 font-11 font-color-9">共{{ order.orderGoodsList.length }}件商品：合计¥{{ order.orderPrice }}</div>
      </div>
      <div class="order-send-btn" @click="sendOrder">发送订单</div>
      <img
        v-if="fileSpace" @click="orderClose"
        :src="fileSpace + '/images/icon-close.png'"
        class="order-close width-28 height-28" alt="">
    </div>
    <div class="height-49"></div>
    <div class="send-box">
      <div class="send-bar flex v-align-c pad-r-15">
        <!-- <img v-if="fileSpace" class="icon-img" :src="fileSpace + '/images/icon-im-audio.png'" alt=""> -->
        <div class="flex-item">
          <div class="flex flex-center input-bar pos-rel">
            <textarea
              :focus="isFocus"
              @click="isClick=true"
              @focus="isFocus=true"
              class="textarea flex-item"
              v-model="content"
              placeholder="想对TA说什么"
              :show-confirm-bar="false"
              :adjust-position="true"
              :confirm-hold="true"
              cursor-spacing="30"
              maxlength="-1"
              @confirm="confirmEls"
              confirm-type="send"
              auto-height />
              <!-- @confirm="confirm"
              @blur="isFocus=false"
              confirm-type="send" -->
              <!-- @bindconfirm="bindSend" -->
            <!-- <img v-if="fileSpace" class="icon-img icon-face" :src="fileSpace + '/images/icon-im-face.png'" alt=""> -->
          </div>
        </div>      
        <div class="send-btn mar-r-8" :class="sendDisabled ? 'disabled':''" @click="sendTxt">发送</div>
        <!-- <img v-if="fileSpace" class="icon-img mar-r-8" :src="fileSpace + '/images/icon-im-goods.png'" alt=""> -->
        <img
          v-if="fileSpace"
          v-show="!moreType"
          @click="openMoreType"
          class="icon-img"
          :src="fileSpace + '/images/icon-im-open.png'"
          alt="">
        <img
          v-if="fileSpace"
          v-show="moreType"
          @click="closeMoreType"
          class="icon-img"
          :src="fileSpace + '/images/icon-im-close.png'"
          alt="">
      </div>
      <ul v-show="moreType" class="send-more-type flex pad-t-10 pad-l-11 pad-r-11">
        <li @click="chooseImage($event, 'camera')">
          <div class="icon-bar">
            <div class="height-63 flex flex-center">
              <img v-if="fileSpace" class="width-30 height-25" :src="fileSpace + '/images/icon-im-camera.png'" alt="">
            </div>
          </div>
          <i class="font-12 font-color-6 pad-t-7">拍照</i>
        </li>
        <li @click="chooseImage($event, 'album')">
          <div class="icon-bar">
            <div class="height-63 flex flex-center">
              <img v-if="fileSpace" class="width-30 height-25" :src="fileSpace + '/images/icon-im-picture.png'" alt="">
            </div>
          </div>
          <i class="font-12 font-color-6 pad-t-7">图片</i>
        </li>
      </ul>
    </div>
    <canvas id="myCanvas" type="2d" style="width:2px;height:2px;visibility:hidden;"></canvas>
  </div>
</template>

<script>
  import { imInit, RongIMLibInit, imGetToken, checkOnline } from '@/api/im'
  import { getMemberInfo } from '@/api/home'
  import { getOrder } from '@/api/shop'
  import { getProjectOrder } from '@/api/distribution'
  import { updateWechatMessage } from '@/api/personal'
  import { setImToken, setInMessage } from '@/utils/auth'

  export default {
    data() {
      return {
        getImTokenData: '',
        messageData: [],
        content: '',
        customerInfo: {},
        memberInfo: {},
        moreType: false,
        isFocus: false,
        sendDisabled: false,
        imMemberId: '',
        base64Pic: '',
        urlPic: '',
        files: [],
        indexNum: null,
        order: {},
        orderId: '',
        orderType: null,
        orderStatusType: '',
        goodsTotalPrice: null,
        orderShow: false,
        inMessage: false,
        isClick: false,
        getImUnreadSellerData: ''
      }
    },
    watch: {
      getInMessage(val) {
        if (val === '1') {
          this.indexNum = null
          this.getMemberInfoEls()
        }
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onUnload() {
      console.log('离开消息会话')
      const im = imInit()
      const RongIMLib = RongIMLibInit()
      var conversation = im.Conversation.get({
        targetId: this.imMemberId,
        type: RongIMLib.CONVERSATION_TYPE.PRIVATE
      })
      conversation.read().then(function() {
        // console.log('清除未读数成功') // im.watch conversation 将被触发
      })
    },
    onShow() {
      this.$pt.removeStorageSync('chooseLocation')
      this.$pt.removeStorageSync('msgOffline')
      if (!this.getCustomerId) {
        this.$utils.showToast({ title: '请先微信授权' })
        setTimeout(() => {
          this.$pt.navigateBack({ delta: -1 })
        }, 2000)
        return
      }
      setInMessage('0')
      this.isClick = false
    },
    mounted() {
      this.imMemberId = this.getCurrentPage().query.memberId
      console.log(this.imMemberId)
      this.getMemberInfoEls()
      this.orderId = this.getCurrentPage().query.orderId
      this.orderType = Number(this.getCurrentPage().query.orderType)
      // this.orderId = '1346750794358231041'
      // this.orderId = '1348467807388602369'
      if (this.orderId) {
        this.orderShow = true
        // this.orderType = 30
        // this.orderType = 10
        if (this.orderType === 10) {
          this.getUserOrder()
        } else {
          this.getProjectOrder()
        }
      }
    },
    methods: {
      imGetToken() {
        imGetToken({
          userId: this.getCustomerId,
          name: this.customerInfo.nickname,
          portraitUri: this.customerInfo.avatar
        }).then((response) => {
          this.getImTokenData = response.token
          setImToken(response.token)
          this.imConnect()
        }).catch((res) => {
        })
      },
      imConnect() {
        const im = imInit()
        im.connect({ token: this.getImTokenData }).then(user => {
          this.initEls()
          console.log('detail 链接成功, 链接用户 id 为: ', user.id)
        }).catch(error => {
          if (error.code !== 34001) {
            console.log('detail 链接失败: ', error.code, error.msg)
            return
          }
          this.initEls()
          console.log('detail 链接失败: ', error.code, error.msg)
        })
      },
      getMemberInfoEls() {
        getMemberInfo(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.customerInfo = response.data
          this.imGetToken()
        })
        getMemberInfo(this.imMemberId).then((response) => {
          if (response.isError) return
          this.memberInfo = response.data
        })
      },
      wallMainEls() {
        this.closeMoreType()
        this.isClick = false
      },
      // 接受通知发起请求
      updateWechatMessage() {
        checkOnline({
          userId: this.imMemberId
        }).then((response) => {
          if (response.isError) return
          if (response.status === '0') {
            if (this.$pt.getStorageSync('msgOffline')) return
            // memberType： 会员类型 1：店长 2：顾客
            let memberType = null
            if (this.imMemberId === this.getMemberId) {
              memberType = 1
            } else {
              memberType = 2
            }
            updateWechatMessage({
              memberId: this.imMemberId,
              msgNum: 1,
              memberType: memberType
            }).then((response) => {
              if (response.isError) return
              this.$pt.setStorageSync('msgOffline', true)
            }).catch(() => {
            })
          } else {
            this.$pt.removeStorageSync('msgOffline')
          }
        }).catch((res) => {
        })
      },
      sendTxt() {
        if (!this.content) return this.$utils.showToast({ title: '消息不能为空' })
        let customer = {}
        let member = {}
        customer.memberId = this.customerInfo.memberId
        customer.nickname = this.customerInfo.nickname
        customer.avatar = this.customerInfo.avatar
        member.memberId = this.memberInfo.memberId
        member.nickname = this.memberInfo.nickname
        member.avatar = this.memberInfo.avatar
        this.sendDisabled = true
        let that = this
        const im = imInit()
        const RongIMLib = RongIMLibInit()
        var conversation = im.Conversation.get({
          targetId: this.imMemberId,
          type: RongIMLib.CONVERSATION_TYPE.PRIVATE
        })
        conversation.send({
          messageType: 'RC:TxtMsg', // 填写开发者定义的 messageType
          content: {
            content: this.content, // 文本内容
            customer: customer,
            member: member,
            extra: '附加信息在这里~' // 附加信息
          },
          isPersited: true, // 是否存储在服务端,默认为 true
          isCounted: true, // 是否计数. 计数消息接收端接收后未读数加 1，默认为 true
          pushContent: 'user 发送了一条消息', // Push 显示内容
          pushData: 'Push 通知时附加信息', // Push 通知时附加信息, 可不填
          isStatusMessage: false, // 设置为 true 后 isPersited 和 isCounted 属性失效
          disableNotification: false // 设置为 true 后移动端不会收到 Push 信息和本地通知提醒
        }).then(function(message) {
          that.content = ''
          that.sendDisabled = false
          that.isClick = false
          that.contentDataPushEls(message)
          that.messageData.push(message)
          that.dateSort()
          that.indexNum = that.messageData.length - 1
          that.updateWechatMessage()
        })
      },
      sendPic() {
        let that = this
        let customer = {}
        let member = {}
        customer.memberId = this.customerInfo.memberId
        customer.nickname = this.customerInfo.nickname
        customer.avatar = this.customerInfo.avatar
        member.memberId = this.memberInfo.memberId
        member.nickname = this.memberInfo.nickname
        member.avatar = this.memberInfo.avatar
        this.sendDisabled = true
        const im = imInit()
        const RongIMLib = RongIMLibInit()
        var conversation = im.Conversation.get({
          targetId: this.imMemberId,
          type: RongIMLib.CONVERSATION_TYPE.PRIVATE
        })
        // 发送图片
        conversation.send({
          messageType: 'RC:ImgMsg', // 'RC:ImgMsg'
          content: {
            content: that.base64Pic, // 压缩后的 base64 略缩图, 用来快速展示图片
            customer: customer,
            member: member,
            imageUri: that.urlPic // 上传到服务器的 url. 用来展示高清图片
          }
        }).then(function(message) {
          that.base64Pic = ''
          that.urlPic = ''
          // that.$utils.showToast({ title: '图片发送成功！' })
          that.content = ''
          that.sendDisabled = false
          that.closeMoreType()
          // that.contentDataPushEls(message)
          that.messageData.push(message)
          that.indexNum = that.messageData.length - 1
          that.updateWechatMessage()
        })
      },
      sendOrder() {
        let contentVal = '订单号：' + this.order.orderNo
        let customer = {}
        let member = {}
        customer.memberId = this.customerInfo.memberId
        customer.nickname = this.customerInfo.nickname
        customer.avatar = this.customerInfo.avatar
        member.memberId = this.memberInfo.memberId
        member.nickname = this.memberInfo.nickname
        member.avatar = this.memberInfo.avatar
        this.sendDisabled = true
        let that = this
        const im = imInit()
        const RongIMLib = RongIMLibInit()
        var conversation = im.Conversation.get({
          targetId: this.imMemberId,
          type: RongIMLib.CONVERSATION_TYPE.PRIVATE
        })
        conversation.send({
          messageType: 'RC:TxtMsg', // 填写开发者定义的 messageType
          content: {
            content: contentVal, // 文本内容
            customer: customer,
            member: member,
            order: that.order,
            extra: '附加信息在这里~' // 附加信息
          },
          isPersited: true, // 是否存储在服务端,默认为 true
          isCounted: true, // 是否计数. 计数消息接收端接收后未读数加 1，默认为 true
          pushContent: 'user 发送了一条消息', // Push 显示内容
          pushData: 'Push 通知时附加信息', // Push 通知时附加信息, 可不填
          isStatusMessage: false, // 设置为 true 后 isPersited 和 isCounted 属性失效
          disableNotification: false // 设置为 true 后移动端不会收到 Push 信息和本地通知提醒
        }).then(function(message) {
          that.orderClose()
          that.sendDisabled = false
          that.isClick = false
          // that.contentDataPushEls(message)
          that.messageData.push(message)
          that.indexNum = that.messageData.length - 1
          that.updateWechatMessage()
        })
      },
      checkOrder(order) {
        if (order.orderType === 10) {
          this.$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + order.orderId })
        } else {
          this.$pt.navigateTo({ url: '/pages/personal/distribution/order/detail/main?orderId=' + order.orderId })
        }
      },
      previewImage(images) {
        this.indexNum = this.messageData.length + 1
        let imagesArr = []
        imagesArr.push(images)
        this.$pt.setStorageSync('chooseLocation', true)
        this.$pt.previewImage({
          urls: imagesArr,
          current: images
        })
      },
      chooseImage(e, type) {
        let that = this
        that.$pt.chooseImage({
          count: 1, // 默认9
          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  original原图  compressed压缩图
          sourceType: [type], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            that.$utils.showToast({
              title: '图片上传中',
              icon: 'loading',
              duration: 150000,
              mask: true
            })
            that.base64Pic = ''
            that.urlPic = ''
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            that.files = res.tempFilePaths
            // console.log('size')
            // console.log(res.tempFiles[0].size)
            let tempFilePaths = res.tempFilePaths[0]
            wx.getSystemInfo({
              success: res => {
                let windowWidth = res.windowWidth
                // 获取图片信息
                wx.getImageInfo({
                  src: tempFilePaths,
                  success: res => {
                    // 比例
                    var scale = 1
                    console.log(res.width)
                    console.log(windowWidth)
                    if (res.width > windowWidth) {
                      scale = windowWidth / res.width
                    }
                    let imgWidth = res.width * scale
                    let imgHeight = res.height * scale
                    const query = wx.createSelectorQuery()
                    query.select('#myCanvas').fields({
                      node: true,
                      size: true
                    }).exec(async res => {
                      const canvas = res[0].node
                      canvas.width = imgWidth
                      canvas.height = imgHeight
                      // 2d画布
                      const ctx = canvas.getContext('2d')
                      // 创建图片
                      const mainImg = canvas.createImage()
                      mainImg.src = tempFilePaths
                      // const mainImgs = await new Promise((resolve, reject) => {
                      //   mainImg.onload = () => resolve(mainImg)
                      //   mainImg.onerror = (e) => reject(e)
                      // })
                      // 绘制图像到画布
                      setTimeout(() => {
                        ctx.drawImage(mainImg, 0, 0, imgWidth, imgHeight)
                        let base64 = canvas.toDataURL('image/jpeg', 0.6).replace('data:image/jpeg;base64,', '')
                        that.base64Pic = base64
                        // console.log(that.base64Pic)
                        // console.log(that.base64Pic.length / 1024)
                        if (that.base64Pic.length / 1024 < 80) {
                          that.doUpload()
                        } else {
                          that.$utils.showToast({ title: '图片太大，请重新选择！' })
                        }
                      }, 500)
                    })
                  },
                  fail: err => {
                    console.log(err)
                    that.$utils.showToast({ title: '获取图片信息失败，请稍后重试！' })
                  }
                })
              }
            })
          },
          fail: function(res) {
            console.log('fail res')
            console.log(res)
            that.$utils.showToast({ title: '图片选择失败，请重新选择！' })
          },
          complete: function(res) {
            console.log('complete')
          }
        })
      },
      doUpload() {
        const that = this
        this.files.forEach(file => {
          // 使用微信上传（只能单张上传）
          const uploadTask = that.$pt.uploadFile({
            url: process.env.BASE_API + '/common/uploadFiles',
            filePath: file,
            name: 'files',
            success(res) {
              const result = JSON.parse(res.data)
              if (result.statusCode >= 400) {
                that.$pt.hideToast()
                that.files = []
                return
              }
              if (result.code === 101) {
                that.$pt.hideToast()
                that.urlPic = result.data[0]
                that.sendPic()
                console.log(that.urlPic)
              } else {
                that.files = []
                that.$utils.showToast({ title: '图片上传发生错误:' + result.msg })
              }
            },
            complete(res) {
              if (res.statusCode >= 400 && res.statusCode !== 504) {
                that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.files = []
                  that.$pt.hideToast()
                }, 800)
              }
              if (res.statusCode === 504) {
                that.$utils.showToast({ title: '网络异常，请稍后再试（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.files = []
                  that.$pt.hideToast()
                }, 800)
              }
            }
          })
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度', res.progress)
          })
        })
      },
      initEls() {
        let that = this
        const im = imInit()
        const RongIMLib = RongIMLibInit()
        var conversation = im.Conversation.get({
          targetId: this.imMemberId,
          type: RongIMLib.CONVERSATION_TYPE.PRIVATE
        })
        let option = {
          timestamp: +new Date(),
          count: 30
        }
        conversation.getMessages(option).then(function(result) {
          let list = result.list // 历史消息列表
          // console.log('历史消息', list)
          if (list.length) {
            list.forEach(item => {
              that.contentDataEls(item)
            })
            that.indexNum = list.length - 1
          }
          that.messageData = list
          that.dateSort()
          // let hasMore = result.hasMore // 是否还有历史消息可以获取
          // console.log('获取历史消息成功', list, hasMore)
        })
      },
      dateSort() {
        let sortTime = ''
        let sortSecond = ''
        this.messageData.forEach(item => {
          if (item.sentTimeDate) {
            let thisTime = item.sentTimeDate.substring(0, 10)
            if (thisTime === sortTime) {
              item.sentTimeDate = item.sentTimeDate.substring(11, 16)
            }
            sortTime = thisTime
            item.sortTime = sortTime
            let thisSecond = item.sentTimeDate.substring(0, 4)
            if (thisSecond === sortSecond) {
              item.sentTimeDate = ''
            }
            sortSecond = thisSecond
            item.sortSecond = sortSecond
          }
        })
      },
      contentDataPushEls(item) {
        if (item.sentTime) {
          let sentArr = []
          item.sentTimeDate = this.$utils.formatTimeLong(item.sentTime, 'yyyy-MM-dd hh:mm:ss')
          if (this.messageData.length) {
            let len = this.messageData.length - 1
            let lenSentTimeDate = this.$utils.formatTimeLong(this.messageData[len].sentTime, 'yyyy-MM-dd hh:mm:ss')
            sentArr.push({ sentTimeDate: lenSentTimeDate })
            sentArr.push({ sentTimeDate: item.sentTimeDate })
            // 数据处理
            let sortTime = ''
            let sortSecond = ''
            sentArr.forEach(itemSub => {
              let thisTime = itemSub.sentTimeDate.substring(0, 10)
              if (thisTime === sortTime) {
                itemSub.sentTimeDate = itemSub.sentTimeDate.substring(11, 16)
              }
              sortTime = thisTime
              itemSub.sortTime = sortTime
              let thisSecond = itemSub.sentTimeDate.substring(0, 4)
              if (thisSecond === sortSecond) {
                itemSub.sentTimeDate = ''
              }
              sortSecond = thisSecond
              itemSub.sortSecond = sortSecond
            })
            item.sentTimeDate = sentArr[1].sentTimeDate
          }
        }
      },
      contentDataEls(item) {
        if (item.sentTime) {
          item.sentTimeDate = this.$utils.formatTimeLong(item.sentTime, 'yyyy-MM-dd hh:mm:ss')
        }
      },
      orderClose() {
        this.orderShow = false
      },
      getUserOrder() {
        getOrder(this.orderId).then((response) => {
          if (response.isError) return
          this.order = response.data
          let total = 0
          if (this.order && this.order.orderGoodsList) {
            this.order.orderGoodsList.forEach(goods => {
              let price = goods.goodsPrice * goods.goodsNum
              total += price
            })
          }
          this.goodsTotalPrice = total.toFixed(2)
          // 订单状态
          this.orderStatusEls(this.order.orderStatus, this.order.deliveryType, this.order.verifyStatus)
        }).catch(() => {
        })
      },
      getProjectOrder() {
        getProjectOrder(this.orderId).then((response) => {
          if (response.isError) return
          this.order = response.data
          let total = 0
          if (this.order && this.order.orderGoodsList) {
            this.goodsListLen = this.order.orderGoodsList.length
            this.order.orderGoodsList.forEach(goods => {
              let price = goods.goodsPrice * goods.goodsNum
              total += price
            })
          }
          this.goodsTotalPrice = total.toFixed(2)
          // 订单状态
          this.orderStatusEls(this.order.orderStatus, this.order.deliveryType, this.order.verifyStatus)
        }).catch(() => {
        })
      },
      orderStatusEls(orderStatus, deliveryType, verifyStatus, key) {
        switch (orderStatus) {
          case -2:
            this.order.orderStatusType = '已取消'
            break
          case -1:
            this.order.orderStatusType = '已取消'
            break
          case 0:
            this.order.orderStatusType = '未付款'
            break
          case 1:
            this.order.orderStatusType = '待发货'
            break
          case 2:
            this.order.orderStatusType = '已发货'
            break
          case 3:
            this.order.orderStatusType = '已收货'
            break
          case 4:
            this.order.orderStatusType = '已完成'
            break
        }
        if (deliveryType === 2) {
          switch (verifyStatus) {
            case 1:
              this.order.orderStatusType = '待核销'
              break
            case 3:
              this.order.orderStatusType = '已收货'
              break
            case 4:
              this.order.orderStatusType = '已完成'
              break
          }
        }
      },
      openMoreType() {
        this.moreType = true
      },
      closeMoreType() {
        this.moreType = false
      },
      confirmEls() {
        // 要执行的操作
        this.sendTxt()
      }
    }
  }
</script>

<style lang="less" scoped>
  .container{
    background: #f5f5f5;
    color: #333333;
    min-height: calc(100vh);
    overflow: hidden;
    .order-send-btn{
      padding: 3px 0px;
      border-radius: 50px;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      min-width: 75px;
      background: linear-gradient(to right, #ff8341, #ff4e23);
      &.check-btn{
        padding: 7px 0px;
        min-width: 80px;
      }
    }
    .order-content{
      width: 100%;
      min-height: 50px;
      box-sizing: border-box;
      background: #f8f8f8;
      border-radius: 5px;
      .order-img{
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .line-1{
        height: 17px;
      }      
    }
    .order-fix{
      position: fixed;
      left: 10px;
      bottom: 72px;
      width: 356px;
      min-height: 70px;
      box-sizing: border-box;
      z-index: 10;
      background: #fff;
      border-radius: 5px;
      .order-img{
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .line-1{
        height: 17px;
      }
      .order-close{
        position: fixed;
        right: 8px;
        bottom: 115px;
        z-index: 11;
      }
    }
    .message-scroll{
      width: 100%;
      height: calc(100vh - 49px);
      &.more-type-scroll{
        height: calc(100vh - 250px);
      }
    }
    .message-wall{
      li{
        .avatar-img{
          border-radius: 100px;
          width: 40px;
          height: 40px;
        }
        h2{
          font-weight: normal;
        }
        .content-item{          
          display: inline-block;          
          text-align: left;
          border-radius: 5px;
          &.content-txt{
            background: #fff!important;
            padding: 12px 10px;
            max-width: 190px;
          }
          &.content-order{
            background: #fff!important;
            padding: 7px 10px!important;
            max-width: 245px;
          }
          &.content-pic{
            max-width: 190px;
            background: #fff!important;
            border: #e6e6e6 1px solid;
            border-radius: 5px;
            img{
              display: block;
              border-radius: 3px;
            }
          }
        }
        .font-color-red{
          color: #FF6600!important;
        }
        &.me{
          text-align: right;
          .content-item{
            background: #ffda43;
            border-top-right-radius: 0;
          }
        }
        &.other{
          text-align: left;
          .content-item{
            background: #fff;
            border-top-left-radius: 0;
          }
        }
        &.date{
          text-align: center;
        }
        .van-infos {
          display: inline-block;
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
          text-align: center;
          box-sizing: border-box;
          padding: 0 3px;
          min-width: 16px;
          line-height: 14px;
          border: 1px solid #fff;
          border-radius: 16px;
          background-color: #ff1d1d;
          -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
          -webkit-transform-origin: 100%;
          transform-origin: 100%;
        }
      }
    }
    .send-box{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
      background: #f5f5f5;      
      box-shadow: 0px -1px 7px 0px rgba(111, 111, 111, 0.14);
      .send-bar{       
        box-sizing: border-box; 
        min-height: 49px;
        // padding-bottom: 7px;
        .send-btn {
          padding: 6px 15px;
          border-radius: 5px;
          text-align: center;
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          background: linear-gradient(to right, #ff8341, #ff4e23);
          &.disabled{
            opacity: 0.6;
          }
        }
        .icon-img{
          width: 27px;
          height: 27px;
        }
        .input-bar{
          background: #fff;
          border-radius: 5px;
          margin: 0 9px 0 9px;
          min-height: 38px;
          // padding-right: 34px;
          .textarea{
            // background:rgba(238, 238, 238, 0.3);
            box-sizing: border-box; 
            padding-left: 10px;
            padding-right: 10px;
            width: 100%;
            height: 38px;
            line-height: unset;
          }
          .icon-face{
            border-radius: 50px;
            position: absolute;
            right: 4px;
            bottom: 0;
          }
        }
      }
      .send-more-type{
        min-height: 198px;
        box-sizing: border-box;
        li{
          flex: 1/4;          
          text-align: center;
          img{
            display: inline-block;
          }
          span{
            display: block;
          }
          .icon-bar{
            display: inline-block;
            width: 63px;
            height: 63px;
            background: #fff;
            border-radius: 5px;
          }
          i{
            display: block;
          }
        }
      }
    }
  }
</style>
